<template>
  <div>
    <l-marker
      v-for="(item,index) in devicesFilter"
      :key="index"
      :lat-lng="[item.lat,item.lng]"
      :icon="getIcon(item)"
      :title="item.name"
      @click="showDevice(item)"
    >
      <l-tooltip :options="options">
        <div>
          {{ item.name }}
        </div>
      </l-tooltip>
    </l-marker>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDeviceImage } from '@/utils/device'
import { dclassCodeMap } from '@/utils/constant'
import 'leaflet-rotatedmarker'
export default {
  name: 'MapMarkers',
  data() {
    return {
      dclassCodeMap,
      options: {
        permanent: true,
        interactive: false,
        direction: 'bottom',
        offset: [0, 8],
        className: 'anim-tooltip'
      }
    }
  },
  computed: {
    ...mapGetters(['devices']),
    devicesFilter() {
      const res = this.devices.filter(val => {
        return (!val.device_serialno || +val.product_type === dclassCodeMap.fkq || +val.product_type === dclassCodeMap.qf) && val.map_show > 0
      })

      return res
    }
  },
  methods: {
    showDevice(currentDevice) {
      this.$emit('showDevice', currentDevice)
    },
    getIcon(item) {
      // eslint-disable-next-line no-undef
      return L.icon({
        iconSize: [28, 28],
        iconUrl: getDeviceImage(item),
        rotationAngle: 45, 
      })
    }
  }
}
</script>

<style lang="scss">
.anim-tooltip{
  background:none;
  border:none;
  color:#fff;
  padding-top:0;
  box-shadow: none;
  font-size:9px;
  transform: scale(0.8);
}
.anim-tooltip:before{
    border-bottom-color:rgba(0,0,0,0);
}
.rotated-icon {
  .leaflet-marker-icon {
    transform: rotate(45deg) !important; // 旋转 45 度
  }
}
</style>
